<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康管理报告第三页</title>
    <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
    <style>
         *{margin: 0;padding: 0;}
        .page{width: 980px;margin: 0 auto;}
        .red{
            color: #ee3738;
        }
        .page3title{
            font-size: 40px;
            font-weight: normal;
            color: #000000;
            text-align: center;
            margin: 10px auto 20px;
        }
        .page3section{
            width: 100%;
            height: 40px;
            line-height: 44px;
            background-color: #bdffd7;
            margin: 20px 0;
        }
        .page3section p{
            margin-left: 40px;
            color: #000000;
            font-weight: bold;
        }
        .light{
            background-color: #e7f3f4;
        }
        table{width: 100%;}
        table tr td,table tr th{
            background-color: #bbe0e3;
            color: #000000;
        }
        .height34{
            height: 34px;
            line-height: 34px;
            text-align: center;
        }
        .height68{
            height: 68px;
            line-height: 68px;
            text-align: center;
        }
        table tr td:first-child{
            width: 290px;
        }
        table tr td:last-child{
            width: 170px;
        }
        #progress{
          width: 100%;
            height: 30px;
            background: #bbe0e3;
            display: inline-block;
            text-align: left;
            margin-left: 10px;
        }
        .barNumber{
            height: 28px;
            line-height: 28px;
            margin-top: -10px;
        }
       #bar{
           height: 28px;
           margin-top: 1px;
            background: #d0ce13;
            display: inline-block;
          
        }
        .mark{
            width: 462px;
            height: 25px;
            margin-left: 10px;
            border-top: 1px solid #335eea;
            border-left: 1px solid #335eea;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .markli{
            width: 54px;
            height: 10px;
            border-left: 1px solid #335eea;
            border-right: 1px solid #335eea;
        }
        .markli1{
            border-left: none;
        }
        .marklast{
            border-right: none;
        }
        .page3ptitle{
            font-size: 16px;
            font-weight: bolder;
            color: #000000;
            text-indent: 3em;
        }
        .page3p{
            margin: 20px;
            text-indent: 2em;
            line-height: 30px;
        }
    </style>
     
</head>
<body>
    <div class="page">
        <div class="page3title">分项指标建议</div>
        <div class="page3section"><p>人体脂肪成分</p></div>
        <table>
            <tr class="height34"><th>&nbsp;</th><th>低</th><th>正常</th><th>高</th><th>范围/评价</th></tr>
            <tr class="height68"><td>脂肪量</td><td colspan="3" class="light"></td><td><p>10.2-13.1</p><p class="red light">偏低</p></td></tr>
            <tr class="height68"><td>脂肪率</td>
                <td colspan="3" >
                    <div id="main1" style="width: 400px;height:80px;"></div>
            </td><td><p>18%-23%</p><p class="red light">偏低</p></td></tr>
            <tr class="height68"><td>肌肉量</td><td class="light">25.6kg</td><td>骨量</td><td>2kg</td><td class=" light"></td></tr>
            <tr class="height68"><td>体型</td><td>正常</td><td>去脂体重</td> <td>47.7kg</td><td></td></tr>
        </table>
        <div class="page3ptitle">脂肪率曲线图</div>
        <#--<div id="main3" style="width: 800px;height:240px;margin: 10px auto;"></div>
         <script type="text/javascript">
             // 基于准备好的dom，初始化echarts实例
             var myChart3 = echarts.init(document.getElementById('main3'));

             // 指定图表的配置项和数据
             var option3 = {
                    //  title: {
                    //      text: '体质指数（BMI）曲线图'
                    //  },
                     xAxis: {
                         type: 'category',
                         data: ['2019-05-21', '2019-05-23']
                     },
                     yAxis: {
                         type: 'value'
                     },
                     series: [{
                         data: [19,19],
                         type: 'line',
                         lineStyle: {
                            color:'#000000'
                        }
                     },
                    
                    ]
                 };


             // 使用刚指定的配置项和数据显示图表。
             myChart3.setOption(option3);
         </script>-->
        <div class="page3p">
            【健康建议】无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数无BMI指数。
        </div>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));

        // 指定图表的配置项和数据
        var option1 = {
                // xAxis: {
                //     type: 'category',
                //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                // },
                // yAxis: {
                //     type: 'value'
                // },
                xAxis: {
                    type: 'value',
                    boundaryGap: '60%',
                    // position: 'top',
                    axisLabel:{
                        inside: true,
                    },
                    axisLine:{
                        lineStyle:{
                            color:"#000000",
                            width:1,
                        }
                    },
                    axisTick:[{    //坐标轴小标记
                        show:true,
                        inside:true,
                        margin:20
                    }],
                },
                yAxis: {
                    type: 'category',
                    axisLabel:{
                        inside: false,
                        margin:30,
                    },
                    axisTick: { // Y轴隐藏刻度
                        show: false,
                    },
                    boundaryGap: '40%',
                    axisLine:{
                        lineStyle:{
                            color:"#000000",
                            width:1,
                        }
                    },
                },
                series: [{
                    data: [9.1],
                    type: 'bar',
                    itemStyle:{
                        color:'#d0ce13'
                    },
                    label: { // 柱子上显示当前值的数值(图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等)
                        show: true,
                        position: 'right', // 位置，好多个选项:'top','bottom','insideTop','insideTopLeft'....
                        distance: 8, // 距离，可以设置(距离图形元素的距离。)
                        color: "#000000",
                        formatter: function (params) { // 柱子上提示的数字：dataIndex是第几个；
                        console.log("参数：", params);
                        // params.dataIndex
                        return params.value
                        },
                    },
                    barWidth: 20, // 柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
                    barMaxWidth: 40,
                    barGap: '80%',// 不同系列的柱间距离，（如 '30%'，表示柱子宽度的 30%）(同一个系列里，不同柱子的间距)
                    barCategoryGap: '40%',
                }]
            };


        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
    </script>
</body>
</html>